<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ include file="/view/include.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>在线考试系统</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="${contextPath}/css/user.css"
	type="text/css" media="all" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<style type="text/css">
#div_processor {
	position: fixed !important;
	position: absolute;
	left: 70%;
//	top: expression((100 + (document.documentElement.scrollTop))+ 'px');
	top: 100px;
	width: 200px;
	height: auto;
	background: #fff;
	border: solid 1px #ddd;
	padding: 5px;
	text-align: center;
}

#div_processor a {
	display: block;
	float: left;
	padding: 3px;
	border: solid 1px #ddd;
	background: #fff;
	width: 14px;
	height: 14px;
	margin-right: 2px;
	margin-bottom: 2px;
	text-decoration: none;
}

#div_processor a:hover {
	background: #fa0
}

#div_processor a.finished {
	background: #0f0
}

#div_processor div {
	margin: 0 0 10px 0;
	float: left;
	height: auto;
}

.qk {
	text-align: center
}

.mtop20 {
	margin-top: 20px
}

.qinfo {
	padding: 5px 10px 5px 10px;
	border: solid 1px #eee;
	border-bottom: solid 2px #eee;
	background: #f9f9f9;
}

.qinfo p {
	margin: 0;
	line-height: 20px;
	font-size: 10pt;
}

.qoptions {
	padding: 5px 5px 5px 15px;
	line-height: 20px;
	border: solid 1px #eee;
	border-top: none;
}

.qoptions a {
	color: #eee;
	position: absolute;
	float: right;
}

.qoptions a:hover {
	color: #f00;
}
</style>
<script type="text/javascript">
<!--
	function doSubmit() {
		if (!confirm("你确定要提交试卷吗？")) {
			return false;
		}
		return true;
	}
	var startDate = new Date('<fmt:formatDate value="${ExamCommand.startTime}" pattern="yyyy/MM/dd HH:mm:ss" />');
	var endDate = new Date();
	endDate.setMinutes(startDate.getMinutes() + ${ExamCommand.paper.duration});
	function updateWCTime() {
		var now = new Date();
		diff1 = endDate - now;
		if (diff1 < 0) {
			clearInterval(timmer);
			alert("考试时间已到，将自动提交试卷。");
			document.examForm.submit();
			return;
		}
		mins1 = Math.floor(diff1 / (1000 * 60));
		secs1 = Math.floor(diff1 / 1000);

		mm1 = mins1;
		ss1 = secs1 - mins1 * 60;

		now = new Date();
		diff2 = now - startDate + 1;
		mins2 = Math.floor(diff2 / (1000 * 60));
		secs2 = Math.floor(diff2 / 1000);

		mm2 = mins2;
		ss2 = secs2 - mins2 * 60;

		document.getElementById("time_remain").innerHTML = mm1 + '分' + ss1
				+ '秒';
		document.getElementById("time_spent").innerHTML = mm2 + '分' + ss2 + '秒';
	}
	var timmer = setInterval('updateWCTime()', 1000);
//-->
</script>
</head>
<body>

	<%@include file="/view/top.jsp"%>

	<form:form name="examForm" id="examForm" method="post"
		action="${contextPath}/exam.action" commandName="ExamCommand"
		onsubmit="return doSubmit();">
		<form:hidden path="pid" />
		<div>
			<table width="100%" border="0" align="center" cellpadding="0"
				cellspacing="0">
				<tr>
					<td>
						<table width="100%" border="0" cellspacing="0" cellpadding="0">
							<tr>
								<td width="9" background="images/tab_12.gif">&nbsp;</td>
								<td bgcolor="e5f1d6">

									<table width="100%" border="1" cellpadding="0" cellspacing="1"
										bgcolor="#E1E1E1">
										<tr bgcolor="#FFFFFF">
											<td valign="top" align="left"
												style="padding-top: 10px; padding-left: 5px; padding-right: 5px">
												<table width="60%" border="0" cellpadding="4"
													cellspacing="1" bgcolor="#E1E1E1">
													<c:forEach items="${ExamCommand.paper.paperSections}"
														var="paperSection" varStatus="psStatus">
														<c:set var="pdCount"
															value="${fn:length(paperSection.paperDetails) }" />
														<tr bgcolor="#FFFFFF">
															<th width="21%" align="left" class="STYLE2">${psStatus.index+
																1}、${paperSection.name
																}（共${pdCount}题，每题${paperSection.perScore
																}分.${paperSection.remark }）</th>
														</tr>
														<c:forEach items="${paperSection.paperDetails}"
															var="pdetail" varStatus="status">
															<tr bgcolor="#FFFFFF">
																<td>
																	<div class="qinfo"
																		id="divQInfo_${pdetail.question.id }">${status.index
																		+ 1 }、${pdetail.question.content }</div>
																	<div class="qoptions"
																		id="divQOption_${pdetail.question.id }">
																		<c:choose>
																			<%-- 判断题 --%>
																			<c:when test="${pdetail.question.qtype == '1' }">
																				<input type="radio"
																					id="question_${pdetail.question.id}_T"
																					name="question_${pdetail.question.id}" value="YES"
																					class="qclazz" />
																				<label for="question_${pdetail.question.id}_T">正确</label>
																				<input type="radio"
																					id="question_${pdetail.question.id}_F"
																					name="question_${pdetail.question.id}" value="NO"
																					class="qclazz" />
																				<label for="question_${pdetail.question.id}_F">错误</label>
																			</c:when>
																			<%-- 单项选择题 --%>
																			<c:when test="${pdetail.question.qtype == '2' }">
																				<c:forEach
																					items="${pdetail.question.questionOptionses }"
																					var="qoption" varStatus="qoStatus">
																					<input type="radio"
																						id="question_${pdetail.question.id}_${qoption.alias}"
																						name="question_${pdetail.question.id}"
																						value="${qoption.alias}" class="qclazz" />
																					<label
																						for="question_${pdetail.question.id}_${qoption.alias}">${qoption.alias}：${qoption.qoption}</label>
																					<br />
																				</c:forEach>
																			</c:when>
																			<%-- 多项选择题 --%>
																			<c:when test="${pdetail.question.qtype == '3' }">
																				<c:forEach
																					items="${pdetail.question.questionOptionses }"
																					var="qoption" varStatus="qoStatus">
																					<input type="checkbox"
																						id="question_${pdetail.question.id}_${qoption.alias}"
																						name="question_${pdetail.question.id}"
																						value="${qoption.alias}" class="qclazz" />
																					<label
																						for="question_${pdetail.question.id}_${qoption.alias}">${qoption.alias}：${qoption.qoption}</label>
																					<br />
																				</c:forEach>
																			</c:when>
																		</c:choose>
																	</div>
																</td>
															</tr>
														</c:forEach>
													</c:forEach>
													<tr bgcolor="#FFFFFF">
														<td>
															<div class="qinfo" style="text-align: center">
																<input type="submit" value="提交试卷" style="width: 75px;"
																	name="btnSubmit" />
															</div>
														</td>
													</tr>
												</table>
											</td>
										</tr>
									</table>
								</td>
								<td width="9" background="images/tab_16.gif">&nbsp;</td>
							</tr>
						</table>
					</td>
				</tr>
				<tr>
					<td height="29">
						<table width="100%" border="0" cellspacing="0" cellpadding="0">
							<tr>
								<td width="15" height="29"><img src="images/tab_20.gif"
									width="15" height="29" /></td>
								<td background="images/tab_21.gif">
									<table width="100%" border="0" cellspacing="0" cellpadding="0">
										<tr>
											<td width="40%">&nbsp;</td>
										</tr>
									</table>
								</td>
								<td width="14"><img src="images/tab_22.gif" width="14"
									height="29" /></td>
							</tr>
						</table>
					</td>
				</tr>
			</table>
		</div>

	</form:form>
	<div id="div_processor">
		<table>
			<tr>
				<td class="STYLE3">姓名:</td>
				<td class="STYLE6"><span>${sessionScope.LOGIN_USER_INFO.name
						}</span></td>
			</tr>
			<tr>
				<td class="STYLE3">剩余时间:</td>
				<td class="STYLE6"><span id="time_remain">&nbsp;</span></td>
			</tr>
			<tr>
				<td class="STYLE3">已用时间:</td>
				<td class="STYLE6"><span id="time_spent">&nbsp;</span></td>
			</tr>
		</table>
	</div>
	<iframe src="view/refresh.jsp" style="display: none"> </iframe>
</body>
</html>